<script setup lang='ts'>
import { ref, reactive, nextTick } from "vue"
import { storeToRefs } from "pinia"
import type { FormInstance, FormRules } from 'element-plus'
import { ElMessage } from 'element-plus'
import { merchantSaveOrUpdateApiPost, merchantDetailApiGet, merchantDeleteAttachmentApiDelete, merchantSaveOrUpdateAttachmentApiPost } from "@/api/userMangement"
import { attachmentUploadApiPost } from "@/api/product.ts"
import { useColorStore } from "@/store/common"
import { useEnumStore } from "@/store/enumeration"
import useInstance from '@/hooks/useInstance';
import upLoadImgSingle from "@/components/upLoadImgSingle.vue"


const imgUpload1 = ref()
const imgUpload2 = ref()
const imgUpload3 = ref()
const provinceData = useColorStore()
const { province, selectProvinceCity } = storeToRefs(provinceData)
const { productType } = storeToRefs(useEnumStore())



const { filterData } = provinceData
defineOptions({
    name: 'addBusiness'
})
const emit = defineEmits(['refresh'])
const { global } = useInstance();
const dialogBasic = ref({
    title: "新建渠道商",
    visible: false,
    width: 700,
    height: 350,
    showFooter: true,
    marginTop: "12vh",
})

const ruleFormRef = ref<FormInstance>()
const ruleImgRef = ref<FormInstance>()
const active = ref(0)
const channelForm = reactive<any>({
    channelMerchantType: null, //  渠道商类型
    channelMerchantCode: null, //  渠道商编码 新增没有 后期通过id 查询 
    channelMerchantName: null, //  渠道商名称
    contactName: null, //  渠道商联系人
    contactMobile: null, //  渠道商联系人手机号
    corporationName: null, //  渠道商法人
    corporationCertNo: null, //  渠道商法人证件号
    locationProvinceCode: null, //   所在地-省
    locationProvinceName: null, //   所在地-省
    locationCityCode: null, //   所在地-市
    locationCityName: null, //  所在地-市
    uscc: null, //  统一社会信用代码
    remarks: null, //  备注
})
const rules = reactive<FormRules>({

    channelMerchantType: [
        {
            required: true,
            trigger: 'blur',
            message: "请选择渠道类型"
        },
    ],
    channelMerchantName: [
        {
            required: true,
            trigger: 'blur',
            message: "请输入渠道商名称"
        },
    ],
    contactName: [
        {
            required: true,
            trigger: 'blur',
            message: "请输入渠道商联系人"
        },
    ],
    contactMobile: [
        {
            required: true,
            trigger: 'blur',
            message: "请输入渠道商联系人手机号"
        },
        {
            trigger: 'blur',
            message: "请输入正确的手机号",
            pattern: /^1[3-9]\d{9}$/
        }
    ],
    corporationName: [
        {
            required: true,
            trigger: 'blur',
            message: "请输入渠道商法人"
        },
    ],
    corporationCertNo: [
        {
            required: true,
            trigger: 'blur',
            message: "请输入渠道商法人证件号"
        },
        {
            trigger: 'blur',
            pattern: /^(\d{17})([0-9Xx])$/i,
            message: "请输入正确的渠道商法人证件号"
        }
    ],
    locationProvinceCode: [
        {
            required: true,
            trigger: 'blur',
            message: "请输入所在地-省"
        },
    ],
    locationCityCode: [
        {
            required: true,
            trigger: 'blur',
            message: "请选择所在地-市"
        },
    ],
    uscc: [
        {
            required: true,
            trigger: 'blur',
            message: "请输入统一社会信用代码"
        },
        // {
        //     trigger: 'blur',
        //     message: "请输入正确的统一社会信用代码",
        //     pattern: /^[0-9A-HJ-NPQRTUWXY]{2}\d{6}[0-9A-HJ-NPQRTUWXY]{10}$/
        // }
    ],




})
const ImgForm = reactive<any>({
    one: {
        channelMerchantCode: null, // 渠道商编码
        attachmentType: 1, // 附件类型 1 正面 2 反面 3 营业执照
        attachmentName: null, // 附件名称
        attachmentAliasName: null, // 附件别名
        attachmentUri: null, // 附件地址
    },
    two: {
        channelMerchantCode: null, // 渠道商编码
        attachmentType: 2, // 附件类型 1 正面 2 反面 3 营业执照
        attachmentName: null, // 附件名称
        attachmentAliasName: null, // 附件别名
        attachmentUri: null, // 附件地址
    },
    three: {
        channelMerchantCode: null, // 渠道商编码
        attachmentType: 3, // 附件类型 1 正面 2 反面 3 营业执照
        attachmentName: null, // 附件名称
        attachmentAliasName: null, // 附件别名
        attachmentUri: null, // 附件地址
    },
})

//显示弹框
const show = (type: string, row?: any) => {
    selectProvinceCity.value = null
    dialogBasic.value.visible = true
    // resetForm()
    if (type === 'add') {
        dialogBasic.value.title = "渠道商新增"
        dialogBasic.value.height = 600
        global.$resetForm(ruleFormRef.value, channelForm)

    } else {
        dialogBasic.value.height = 600

        global.$resetForm(ruleFormRef.value, channelForm)
        dialogBasic.value.title = "渠道商详情"
        global.$objCopy(channelForm, row)
 
        filterData(1, null, row.locationProvinceCode)
     
    }
}
const onClose = () => {
    selectProvinceCity.value = null
    active.value = 0
    dialogBasic.value.visible = false
    resetForm()
    Object.keys(channelForm).forEach(item => channelForm[item] = null)

}
const onConfirm = async () => {
    active.value++
}

const resetForm = () => {
    ruleFormRef.value?.resetFields()
}
const proChange = (val: any) => {
    console.log(val);
    province.value.some(item => {
        if (val == item.dictItemCode) {
            filterData(1, item.id)
            channelForm.locationProvinceName = item.dictItemName
            channelForm.locationCityCode = null
            channelForm.locationCityName = null
            return
        }
    })

}
const proChange1 = (val: any) => {
    console.log(val);
    selectProvinceCity.value.some(item => {
        if (val == item.dictItemCode) {
            channelForm.locationCityName = item.dictItemName
            return
        }
    })
}
const nextSetp = () => {
    active.value--
}



defineExpose({
    show
})
</script>

<template>
    <SysDialogSlot :title="dialogBasic.title" :width="dialogBasic.width" :height="dialogBasic.height"
        :show-footer="dialogBasic.showFooter" :visible="dialogBasic.visible" :draggable="true"
        :margin-top="dialogBasic.marginTop" @on-close="onClose" destroy-on-close @on-confirm="onConfirm">
        <template v-slot:content>
            <div style="margin: 10px 0px;">
                <el-steps :active="active" finish-status="success" align-center>
                    <el-step title="渠道商基础信息" />
                    <el-step title="渠道商附件上传" />
                </el-steps>
            </div>
            <el-form ref="ruleFormRef" :model="channelForm" :rules="rules" label-width="150px" class="demo-ruleForm"
                status-icon v-show="active === 0">


                <el-form-item label="渠道商类型" prop="channelMerchantType">
                    <BlackSelect v-model:select-value="channelForm.channelMerchantType" disabled :options="productType">
                    </BlackSelect>

                </el-form-item>

                <el-form-item label="渠道商名称" prop="channelMerchantName">
                    <el-input disabled v-model="channelForm.channelMerchantName" placeholder="请输入" />
                </el-form-item>
                <el-form-item label="渠道商联系人" prop="contactName">
                    <el-input v-model="channelForm.contactName" disabled placeholder="请输入" />
                </el-form-item>
                <el-form-item label="联系人手机号" prop="contactMobile">
                    <el-input v-model="channelForm.contactMobile" disabled placeholder="请输入" />
                </el-form-item>

                <el-form-item label="渠道商法人" prop="corporationName">
                    <el-input v-model="channelForm.corporationName" disabled placeholder="请输入" />
                </el-form-item>
                <el-form-item label="渠道商法人证件号" prop="corporationCertNo">
                    <el-input v-model="channelForm.corporationCertNo" maxlength="18" disabled placeholder="请输入" />
                </el-form-item>
                <el-form-item label="所在地-省" prop="locationProvinceCode">
                    <el-select v-model="channelForm.locationProvinceCode" disabled @change="proChange"
                        placeholder="请选择所在省份">
                        <el-option v-for="item in province" :key="item.id" :label="item.dictItemName"
                            :value="item.dictItemCode" />
                    </el-select>
                </el-form-item>
                <el-form-item label="所在地-市" prop="locationCityCode">
                    <el-select v-model="channelForm.locationCityCode" disabled @change="proChange1"
                        placeholder="请选择所在市">
                        <el-option v-for="item in selectProvinceCity" :key="item.id" :label="item.dictItemName"
                            :value="item.dictItemCode" />
                    </el-select>
                </el-form-item>
                <el-form-item label="统一社会信用代码" prop="uscc">
                    <el-input v-model="channelForm.uscc" disabled placeholder="请输入" />
                </el-form-item>
                <el-form-item label="备注" prop="remarks">
                    <el-input v-model="channelForm.remarks" disabled placeholder="请输入" />
                </el-form-item>
            </el-form>



            <el-form ref="ruleImgRef" :model="ImgForm" style="margin-top: 50px;" label-width="200px"
                class="demo-ruleForm" status-icon v-show="active === 1">
                <el-form-item label="法人身份证正面照片">

                    <el-image style="width: 100px; height: 100px"
                        :src="channelForm.attachmentList && channelForm.attachmentList[0]?.attachmentUri"
                        :zoom-rate="1.2" :max-scale="7" :min-scale="0.2"
                        :preview-src-list="[channelForm.attachmentList && channelForm.attachmentList[0]?.attachmentUri]" :initial-index="4"
                        fit="cover">

                    </el-image>


                </el-form-item>
                <el-form-item label="法人身份证反面照片">
                    <el-image style="width: 100px; height: 100px"
                        :src="channelForm.attachmentList && channelForm.attachmentList[1]?.attachmentUri"
                        :zoom-rate="1.2" :max-scale="7" :min-scale="0.2"
                        :preview-src-list="[channelForm.attachmentList && channelForm.attachmentList[1]?.attachmentUri]" :initial-index="4"
                        fit="cover">

                    </el-image>
                </el-form-item>
                <el-form-item label="营业执照">
                    <el-image style="width: 100px; height: 100px"
                        :src="channelForm.attachmentList && channelForm.attachmentList[2]?.attachmentUri"
                        :zoom-rate="1.2" :max-scale="7" :min-scale="0.2"
                        :preview-src-list="[channelForm.attachmentList && channelForm.attachmentList[2]?.attachmentUri]" :initial-index="4"
                        fit="cover">

                    </el-image>
                </el-form-item>

            </el-form>

        </template>

        <template v-slot:myFooter>
            <div class="dialog-footer">
                <!-- <el-button @click="onClose">取消</el-button> -->
                <el-button @click="nextSetp" v-if="active !== 0">上一步</el-button>
                <el-button type="success" @click="onConfirm" v-if="active === 0">下一步</el-button>
                <!-- <el-button type="success" @click="onConfirmImg" v-if="active === 1">确定</el-button> -->
            </div>
        </template>

    </SysDialogSlot>
</template>

<style lang='scss' scoped>
.my-header {
    height: 48px;
    font-size: 18px;
}
</style>
